body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
}

nav ul li a{
    color: var(--text-light);
    display: block;
    padding: var(--main-padding);
    /* padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px; */
    text-decoration: none;
    text-align: center;
}

.box {
  padding: var(--main-padding); 
}

nav ul li a:hover{
    background-color:#494848
}

nav ul li {
    margin-bottom: 20px;
}

body{
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 1.6;
background-color: #ffffff;
color: #333;
}

h1{
    font-size: 2.5rem;
    color: #2c3e50;
}

h2{
    font-size: 1.8rem;
    margin-top: 20px;
}

img{
    max-width: 120px;
    height: auto;
    border-radius: var(--standard-radius);
    margin-top: 15px;
}

.btn-green {
  background-color: var(--btn-green);
  color: var(--btn-text-dark);
}

.btn-red {
  background-color: var(--btn-red);
  color: var(--btn-text-dark);
}


p{
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.caption-text{
    font-size: 1rem;
    color: #000000;
    font-style: italic;
}

main {
    width: 80%;
    margin: 0px auto;
}

:root {
  --primary-bg: #333;
  --text-light: white;
  --accent-blue: #4d4dff;
  --standard-radius: 8px;
  --main-padding: 20px;
  --home-btn: #333;
  --about-btn: #333;
  --contact-btn: #333;
  --nav-text: black;
}
.home-link {
  background-color: var(--home-btn);
  color: white;
}

.about-link {
  background-color: var(--about-btn);
  color: var(--nav-text);
  border: 1px solid #ccc;
}

.contact-link {
  background-color: var(--contact-btn);
  color: white;
}
.btn-home {
  background-color: var(--home-btn); 
}

.btn-about {
  background-color: var(--about-btn);
}

.btn-contact {
  background-color: var(--contact-btn); 
}